<template>
  <div>
    <!-- 设置标题 -->
    <Title title="实时温度曲线"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="left1" style="height: 150px;margin-top: 15px;"></div>
  </div>
</template>

<script>
// 引入所需要的图表
import { Line } from '@antv/g2plot';
// 引入get请求
import { get } from '@/utils/request'
// 引入moment
import moment from 'moment';
export default {
  data() {
    return {
      // 实时温度数据
      tempArr:[]
    }
  },
  async mounted() {
    await this.getTempData()
    // 自动初始化图表
    await this.initLeft1()
  },
  methods: {
    // 创建图表
    initLeft1() {
      const line = new Line(this.$refs.left1, {
        data: this.tempArr,
        xField: 'year',
        yField: 'value',
        label: {},
        point: {
          size: 5,
          shape: 'diamond',
          style: {
            fill: 'white',
            stroke: '#5B8FF9',
            lineWidth: 2,
          },
        },
        tooltip: { 
          showMarkers: false },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: '#000',
              fill: 'red',
            },
          },
        },
        interactions: [{ type: 'marker-active' }],
      });

      line.render();
    },
    // 获取实时温度的数据
    async getTempData(){
      let tempData = await get('/dashboard/pageQueryData?page=1&pageSize=20')
      // console.log(tempData.data.list);
      this.tempArr = tempData.data.list.map(item => {
        return {
          year: this.$options.filters.fmtDate(item.insert_time),
          value: item.temperature
        }
      })
      console.log(this.tempArr);
    }
  },
  // 局部注册 过滤器
  filters: {
    fmtDate(date) {
      return moment(date).format("HH:mm");
      // 或者return自己编写的时间处理函数
    },
  },
}
</script>

<style lang="less" scoped></style>